<template>
  <el-dialog v-model="addOrEditVisible" title="存储配置" :before-close="closeEditDialog"
             width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
             :size="formSize" status-icon>
      <!--      <el-row>-->
      <!--        <el-col :span="24">-->
      <!--          <el-form-item label="主键" prop="id">-->
      <!--            <el-input v-model="ruleForm.id"/>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="存储类型" prop="storageType">
            <el-radio-group v-model="ruleForm.storageType" @change="storageTypeChange">
              <el-radio v-for="item in STORAGE_TYPE_LIST" v-model="ruleForm.storageType" :label="item.value"
              >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 本地-->
      <template v-if="ruleForm.storageType == 0">
        <el-row>
          <el-col :span="24">
            <el-form-item label="存储空间（Bucket）" prop="bucket">
              <el-input v-model="ruleForm.bucket"/>
              <span class="form-tip">存储空间，如：`D://file`，上传的文件存储的位置</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="空间域名（Domain）" prop="domain">
              <el-input v-model="ruleForm.domain"/>
              <span class="form-tip">映射本地目录的URL地址</span>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

      <!--七牛-->
      <template v-if="ruleForm.storageType == 1">
        <font color="red">此处还没有开发功能</font>

      </template>

      <!--阿里云-->
      <template v-if="ruleForm.storageType == 2">
        <el-row>
          <el-col :span="24">
            <el-form-item label="存储空间（Bucket）" prop="bucket">
              <el-input v-model="ruleForm.bucket"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="ACCESS_KEY（AK）" prop="accessKey">
              <el-input v-model="ruleForm.accessKey"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="SECRET_KEY（SK）" prop="secretKey">
              <el-input v-model="ruleForm.secretKey"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="END_POINT（EP）" prop="endpoint">
              <el-input v-model="ruleForm.endpoint"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="空间域名（Domain）" prop="domain">
              <el-input v-model="ruleForm.domain"/>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

      <!--腾讯-->
      <template v-if="ruleForm.storageType == 3">
        <font color="red">此处还没有开发功能</font>
      </template>
    </el-form>
    <template #footer>
     <span class="dialog-footer">
       <el-button @click="closeEditDialog">关闭</el-button>
       <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
     </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus'
import {ElMessage} from "element-plus";
import router from "@/router";
import {insertStorageConfig, updateStorageConfig} from '@/apis/http/system/StorageConfigHttp';
import {StorageConfig} from "@/apis/model/system/StorageConfigModel";
import {STORAGE_TYPE_LIST} from '@/util/common.util';

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: StorageConfig,
  addDataType: String,
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  storageType: [
    {required: true, message: '请输入存储类型', trigger: 'blur'}
  ],
  bucket: [
    {required: true, message: '请输入存储空间', trigger: 'blur'}
  ],
  accessKey: [
    {required: true, message: '请输入ACCESS_KEY（AK）', trigger: 'blur'}
  ],
  secretKey: [
    {required: true, message: '请输入SECRET_KEY（SK）', trigger: 'blur'}
  ],
  endpoint: [
    {required: true, message: '请输入END_POINT（EP）', trigger: 'blur'}
  ],
  domain: [
    {required: true, message: '请输入空间域名（Domain）', trigger: 'blur'}
  ],
  stateFlag: [
    {required: true, message: '请输入状态 0-启用 1-停用', trigger: 'blur'}
  ],
  remark: [
    {required: true, message: '请输入备注', trigger: 'blur'}
  ],
})

const storageTypeChange = (val: any) => {
  console.log(val)
}

onMounted(() => {
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertStorageConfig(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateStorageConfig(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }
    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.form-tip {
  color: gray;
}
</style>
